<!--
 * @Description: 
 * @Date: 2023-04-01 10:29:56
 * @LastEditors: czp
 * @LastEditTime: 2023-05-06 11:01:39
-->
<template>
	<!-- 注册对话框 -->
	<Teleport to="#dialog">
		<el-dialog class="login-dialog" @close="resetForm" v-model="showDialog" width="21%" :show-close="true">
			<el-tabs class="login-box" v-model="signUpFrom.way" stretch @tab-change="resetForm">
				<el-tab-pane v-for="item in ESignUp" :key="item" :label="$t(`signUp.${item}`)" :name="item"> </el-tab-pane>
			</el-tabs>
			<div class="login-box">
				<!-- 手机号 邮箱注册 -->
				<el-form ref="signUpFormRef" :rules="rules" :model="signUpFrom" status-icon class="tel-box box">
					<el-form-item v-if="signUpFrom.way == 'tel'" prop="target">
						<el-input v-model="signUpFrom.target" :placeholder="$t('signUp.tel-hint')">
							<template #prepend>
								<el-select v-model="signUpFrom.callAreaCode" style="width: 70px">
									<el-option :label="'+86'" :value="'+86'" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item v-if="signUpFrom.way == 'email'" prop="target">
						<el-input v-model="signUpFrom.target" :placeholder="$t('signUp.email-hint')" />
					</el-form-item>

					<el-form-item prop="code">
						<el-input v-model="signUpFrom.code" :placeholder="$t('signUp.code-hint')">
							<template #append>
								<ElButton :disabled="isEmpty(signUpFrom.target) || count != 0" @click="sendCode" :type="'primary'" style="width: 102px">
									{{ count == 0 ? $t("signUp.get-code") : count + "s" }}
								</ElButton>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="signUpFrom.password" type="password" :placeholder="$t('signUp.password-hint')" />
					</el-form-item>
					<el-form-item prop="confirmPassword">
						<el-input v-model="signUpFrom.confirmPassword" type="password" :placeholder="$t('signUp.password-hint2')" />
					</el-form-item>

					<el-form-item>
						<ElButton @click="validateForm" class="sub-btn" type="primary" :size="'large'">{{ $t("signUp.sign-up") }}</ElButton>
					</el-form-item>

					<el-form-item prop="isAgree">
						<el-checkbox class="agreement" v-model="signUpFrom.isAgree" size="large">
							<div>
								{{ $t("signIn.agree") }} <span class="title"> {{ $t("signIn.agreement") }}</span> {{ $t("signIn.and") }} <span class="title">{{ $t("signIn.policy") }}</span>
							</div>
						</el-checkbox>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</Teleport>
</template>
<script setup lang="ts">
import { TFormItemRules } from "@/components/interface";
import { ESignUp } from "@/enums/appEnum";
import { baseGetValidateCode } from "@/service/modules/base";
import { userSignUp } from "@/service/modules/user";
import { isEmpty } from "@/utils/is";
import { FormInstance } from "element-plus";
import { useI18n } from "vue-i18n";
export interface ISignUpForm {
	way?: "tel" | "email"; //登录类型
	callAreaCode?: string;
	target: string; //电话号码
	code: string; //验证码
	password: string; //密码
	confirmPassword: string;
	isAgree: boolean; // 是否同意隐私政策
}
//获取i18n ComposerTranslation
const i18n = useI18n();

// 显示注册对话框
const showDialog = ref(false);
// 打开对话框
const open = () => (showDialog.value = true);
// 关闭对话框
const close = () => (showDialog.value = false);
// 注册表单
const signUpFrom = ref<ISignUpForm>({
	way: "tel",
	callAreaCode: "+86",
	target: "",
	code: "",
	password: "",
	confirmPassword: "",
	isAgree: false
});
/**
 * 重置表单
 */
const resetForm = () => {
	signUpFrom.value.target = "";
	signUpFrom.value.code = "";
	signUpFrom.value.password = "";
	signUpFrom.value.confirmPassword = "";
};

// 表单ref对象
const signUpFormRef = ref<FormInstance>();
/**
 * 验证密码
 */
const validatePassword = (rule: any, value: string, callback: any) => {
	if (value.trim() === "") {
		callback(new Error(i18n.t("signUp.input-hint")));
	} else {
		if (signUpFrom.value.password.trim() != signUpFrom.value.confirmPassword.trim()) {
			callback(new Error(i18n.t("signUp.password-error")));
		}
		callback();
	}
};
//表单项规则
const rules = reactive<TFormItemRules<ISignUpForm>>({
	target: [{ required: true, message: i18n.t("signUp.tel-hint") }],
	code: [{ required: true, message: i18n.t("signUp.code-hint") }],
	password: [{ required: true, message: i18n.t("signUp.password-hint") }],
	confirmPassword: [{ required: true, validator: validatePassword }],
	isAgree: [{ required: true, validator: (_, value) => value === true, message: i18n.t("signIn.agreement-hint") }]
});

// 验证码倒计时
const count = ref(0);
// 定时期id
let timer: string | number | NodeJS.Timer = null;
/**
 * 发送验证码
 */
const sendCode = async () => {
	try {
		const { message } = await baseGetValidateCode(signUpFrom.value);
		ElMessage.success({ message, duration: 1000 });

		count.value = 60;
		timer = setInterval(() => {
			if (count.value == 0) {
				clearInterval(timer);
				return;
			}
			count.value -= 1;
		}, 1000);
	} catch (error) {}
};

/**
 * 注册
 */
const signUp = async () => {
	try {
		const { message } = await userSignUp(signUpFrom.value);
		ElMessage.success({ message, duration: 1000 });
		close();
	} catch (error) {}
};
/**
 *验证表单
 */
const validateForm = async () => {
	await signUpFormRef.value.validate((valid, fields) => {
		if (valid) {
			signUp();
		} else {
			console.log("error submit!", fields);
		}
	});
};
defineExpose({ open, close });
</script>
<style lang="scss" scoped>
.login-box {
	--el-color-primary: #c39f63;
	--el-color-basic-black: #333333;
	--el-color-info: #c39f63;
	--el-color-primary-dark-2: #ecc47e;
	--el-color-primary-light-3: #ecc47e;
	.box {
		min-height: 300px;
		padding: 32px 20px;
		padding-bottom: 0;
	}
	.wx-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--el-color-basic-black);
	}
	.tel-box {
		color: var(--el-color-primary);
	}
	.el-form-item {
		margin-bottom: 2rem;
	}
	.sub-btn {
		width: 100%;
		margin-top: 20px;
	}
	.register-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 20px;
	}
	.agreement {
		--el-checkbox-checked-text-color: #606266;

		white-space: normal;
		.title {
			color: var(--el-color-primary);
		}
	}
}
</style>
